<template>
	<view class="content">
		<view v-if="type=='line'&&textInside==true">
			<view class="flex-row items-center">
				<view class="progress-line-outer flex-row items-center" :style="{height:strokeWidth+'px'}">
					<view class="progress-line-inner" :style="{width:percentage+'%',backgroundColor:color,height:strokeWidth+'px'}"></view>
					<text class="progress-val" :style="{color:textColor}">{{percentage}}%</text>
				</view>
			</view>
		</view>
		<view v-else-if="type=='line'&&textInside==false">
			<view class="flex-row items-center">
				<view class="progress-line-out-outer flex-row items-center" :style="{height:strokeWidth+'px'}">
					<view class="progress-line-out-inner" :style="{width:percentage+'%',backgroundColor:color,height:strokeWidth+'px'}"></view>
				</view>
				<text class="progress-val" :style="{color:textColor}">{{percentage}}%</text>
			</view>
		</view>
		
		<view v-else-if="type=='circle'">
			<canvas :style="{width:width+'px',height:width+'px'}" id="canvas" canvas-id="canvas" ></canvas>
		</view>
		
		<view v-else-if="type=='dashboard'">
			<canvas :style="{width:width+'px',height:width+'px'}" id="dashboard" canvas-id="dashboard" ></canvas>
		</view>
	</view>
</template>
<script>
	export default {
		props:{
			type:{
				type:String,
				default: 'circle'
			},
			textInside:{
				type:Boolean,
				default: false
			},
			percentage:{
				type:Number,
				default: 30
			},
			width:{
				type:Number,
				default: 150
			},
			color:{
				type:String,
				default: '#27b5ff'
			},
			text:{
				type:String,
				default: ''
			},
			textColor:{
				type:String,
				default: '#555'
			},
			textSize:{
				type:Number,
				default: 18
			},
			strokeWidth:{
				type:Number,
				default: 10
			},
			strokeLinecap:{
				type:String,
				default: 'round'
			},
		},
		data() {
			return {
				//textInside:'true',  //进度条显示文字内置在进度条内（只在 type=line 时可用）context:null,
				timer:null,
				n:0,
				rad:Math.PI/3*5/100, //绘制的为300度的圆
				//type:'circle',   //line circle
				//percentage:0, //	百分比（必填）
				//strokeLinecap:'round',  //circle/dashboard 类型路径两端的形状 :butt/round/square
				//strokeWidth:15, // 进度条的宽度，单位 px
				//width:150,// 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用）
				//textColor:'orange'  ,//指定进度条字体颜色（支持 hex 格式）
				//showText:'',  //是否显示进度条文字内容
				format:'',  //指定进度条文字内容
				defineBackColor:'',  //指定进度条底色（支持 hex 格式）
				
				status:'',	//进度条当前状态	string	success/exception/warning
				//color:'#27b5ff', //进度条背景色（会覆盖 status 状态颜色）	string/function/array
				
				
			}
		},
		mounted() {
			//const ctx = wx.createCanvasContext('canvas'); //在pages中
			//canvas组件注册无效，这个因为createCanvasContext方法在page页面默认传了一个this，在组件里面需要手动传this。同时生成画布的时候wx.canvasToTempFilePath也要传入this,如下面的代码
			if(this.type=='circle'){
				let context = uni.createCanvasContext('canvas',this);  //在组件中
				this.context = context
				this.draw(this.percentage)
			}else if(this.type=='dashboard'){
				let context = uni.createCanvasContext('dashboard',this);  //在组件中
				this.context = context
				this.draw(this.percentage)
			}
		},
		methods: {
			draw(val){
				// this.percentage+=30
				// if(this.percentage>99){
				// 	this.percentage = 100
				// }
				if(this.type=='circle'){
					// let context = uni.createCanvasContext('canvas')
					// this.context = context
					
					// 调用定时器实现动态效果
					if(val!=''){
						this.loadCanvas(val/100);
						//this.drawCanvas(val/100);
					}
				}else if(this.type=='dashboard'){
					this.drawDashboard(val);
				}
			},
			drawJian(val){
				// this.percentage-=10
				// if(this.percentage<1){
				// 	this.percentage = 0
				// }
				if(this.type=='circle'){
					//let context = uni.createCanvasContext('canvas')
					//this.context = context
					
					//console.log(val,'drawJian-----')
					// 调用定时器实现动态效果
					if(val>-1){   //val!='' val=0居然判断失败
						//console.log(val,'drawJian-----2')
						this.loadCanvasJian(val/100);
					}
				}else if(this.type=='dashboard'){
					this.drawDashboard(val);
				}
			},
			drawCanvas(cur){
				console.log('drawCanvas-----cur:',cur)
				let context = this.context
				let w = this.width/2  //画布大小
				
				// 画外圈
				let outerR = w //外圈半径
				let outerColor = 'rgb(229,233,242)'
				context.beginPath();
				context.arc(w, w, outerR, 0, Math.PI * 2, true);  
				context.closePath();  
				context.setFillStyle(outerColor);  // 填充内部颜色
				context.fill();        // 画圆
				context.beginPath();   
			    // 画内部空白  
				let interR = w-this.strokeWidth //外圈半径
				let interColor = 'rgba(255,255,255,1)'
			    context.beginPath();
			    context.arc(w, w, interR, 0, Math.PI * 2, true);  
			    context.closePath();  
			    context.setFillStyle(interColor);  // 填充内部颜色
			    context.fill();        // 画内圆
			    context.beginPath();
				if(cur>0){
					// 起始点-(Math.PI/2)，终止点为((Math.PI*2)*cur)-Math.PI/2的 整圆cur为每一次绘制的距离
					let progR = w-this.strokeWidth/2 
					context.arc(w, w, progR, -(Math.PI / 2), ((Math.PI * 2) * cur ) - Math.PI / 2, false);
					context.setStrokeStyle(this.color);
					context.setLineCap(this.strokeLinecap);
					context.setLineWidth(this.strokeWidth)
				}
					context.stroke();        //在中间写字  
					context.setFontSize(this.textSize);  // 字体大小，样式
					context.setFillStyle(this.textColor);  // 颜色
					context.setTextAlign('center');  // 位置
					context.setTextBaseline('middle');  
					context.moveTo(w, w);  // 文字填充位置
					if(this.text!=''){
						context.fillText(this.percentage,w, w-10);
						context.fillText(this.text, w, w+10);
					}else{
						context.fillText(this.percentage,w, w);
					}
				
				context.draw()
			}, 
			loadCanvas(nowT){
				//console.log(this.n,nowT)
				let that = this
			     that.timer = setInterval(()=>{
			         if(that.n>nowT){
			             clearInterval(that.timer);
			         }else{
			             //that.drawCanvas(that.n);
			             //that.n += 0.01;
						 that.n = Number(that.n)+0.01;
						 that.n = Number(that.n.toFixed(2))
						 that.drawCanvas(that.n);
			         }
			     },15);
			 },
			 loadCanvasJian(nowT){
			 	//console.log(this.n,nowT)
			 	let that = this
			      that.timer = setInterval(()=>{
			          if(that.n<nowT){
			              clearInterval(that.timer);
			          }else{
						  that.n = Number(that.n)-0.01;
						  that.n = Number(that.n.toFixed(2))
			              that.drawCanvas(that.n);
			          }
			      },15);
			},
			drawDashboard(cur){
				console.log('drawDashboard-----cur:',cur)
				let rad = this.rad
				let context = this.context
				
				context.setFillStyle('#fff');  // 填充内部颜色
				context.rect(0, 0, this.width,this.width)
				
				let w = this.width/2  //画布大小
				let outerR = w //外圈半径
				let outerColor = 'rgb(229,233,242)'
				
				
				context.save();
				context.beginPath();
				context.setLineWidth(this.strokeWidth)
				var radius = w
				context.setLineCap(this.strokeLinecap)
				context.setStrokeStyle(outerColor)
				context.arc(w, w, outerR-this.strokeWidth,-Math.PI/180*240, Math.PI/180*60, false);
				//**起点，终点，半径，开始点，结束点，是否顺/逆时针**
				context.stroke();
				context.closePath();
				context.restore();
				
				context.save();
				context.setStrokeStyle(this.color)
				context.setLineWidth(this.strokeWidth)
				context.setLineCap(this.strokeLinecap)
				
				if(cur>0){
				context.beginPath();
				context.arc(w, w, outerR-this.strokeWidth ,-Math.PI/180*240 ,-Math.PI/180*240+cur*rad , false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
				context.stroke();
				context.closePath();
				context.restore();
				}
				
				//context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
				context.setFillStyle(this.textColor)
				var font_size = this.textSize;
				context.setFontSize(font_size)
				var text_width = context.measureText(cur.toFixed(0)).width;
				context.fillText(cur.toFixed(0), w-text_width/2, w + font_size/2);
				//context.restore();
				
				context.draw()
			}, 
		
		}
	}
</script>
<style lang="scss" scoped>
	.content{
		/* width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%; */
		margin: 0rpx auto;
		box-sizing: border-box;
	
		.progress-line-outer{
			background-color: #eee;
			width: 100%;
			height: 40rpx;
			border-radius: 50rpx;
			margin: 15rpx 0;
		
			.progress-line-inner{
				height: 40rpx;
				border-radius: 50rpx;
			}
			.progress-val{
				font-size: 26rpx;
				margin-left: -70rpx;
			}
		}
		.progress-line-out-outer{
			background-color: #eee;
			width: calc(100% - 80rpx);
			height: 20rpx;
			border-radius: 50rpx;
			margin: 15rpx 0;
		
			.progress-line-out-inner{
				height: 20rpx;
				border-radius: 50rpx;
			}
		}
		.progress-val{
			font-size: 28rpx;
			margin-left: 10rpx;
		}		
	}
	/** 引入真实项目时，请将以下样式拷贝到全局样式uni.scss中，不需要每个页面都定义 ----start**/
	view,
	image,
	text {
	  box-sizing: border-box;
	  flex-shrink: 0;
	}
	
	#app {
	  width: 100vw;
	  height: 100vh;
	}
	
	.flex-row {
	  display: flex;
	  flex-direction: row;
	}
	
	.flex-col {
	  display: flex;
	  flex-direction: column;
	}
	
	.justify-start {
	  display: flex;
	  justify-content: flex-start;
	}
	
	.justify-center {
	  display: flex;
	  justify-content: center;
	}
	
	.justify-end {
	  display: flex;
	  justify-content: flex-end;
	}
	
	.justify-evenly {
	  display: flex;
	  justify-content: space-evenly;
	}
	
	.justify-around {
	  display: flex;
	  justify-content: space-around;
	}
	
	.justify-between {
	  display: flex;
	  justify-content: space-between;
	}
	
	.items-start {
	  display: flex;
	  align-items: flex-start;
	}
	
	.items-center {
	  display: flex;
	  align-items: center;
	}
	
	.items-end {
	  display: flex;
	  align-items: flex-end;
	}
	/** 引入真实项目时，请将以下样式拷贝到全局样式uni.scss中，不需要每个页面都定义 ----end**/
</style>
